<script setup lang="ts">
import UCharts from '@qiun/ucharts'
import { onMounted, watch } from 'vue'

const props = defineProps<{
  totalNum: number
  shorthandNum: number
}>()

watch(props, () => {
  initChart()
})

function initChart() {
  const ctx = uni.createCanvasContext('pieChart')
  const _chart = new UCharts({
    type: 'ring',
    context: ctx,
    width: uni.upx2px(700),
    height: uni.upx2px(400),

    legend: {
      show: false,
    },

    series: [{
      name: '已学习',
      data: props.shorthandNum,
    }, {
      name: '未学习',
      data: props.totalNum - props.shorthandNum,
    }],
    disablePieStroke: true,
    colors: ['#2979ff', '#edf3ff'],
    title: {
      name: `${props.shorthandNum}/${props.totalNum}`,
      color: '#2979ff',
      fontSize: uni.upx2px(40),
      offsetY: uni.upx2px(2),
    //   formatter: (val: string) => {
    //     const [current, total] = val.split('/')
    //     return [
    //       { text: current, color: '#000' },
    //       { text: `/${total}`, color: '#2979ff' }, // 使用原来的颜色
    //     ]
    //   },
    },
    subtitle: {
      name: '已学单词',
      color: '#666666',
      fontSize: uni.upx2px(24),
      offsetY: uni.upx2px(14),
    },
    extra: {
      ring: {
        // 圆环的宽度
        ringWidth: uni.upx2px(40),
        // activeOpacity: 1,
        // activeRadius: 0,
        // offsetAngle: 0,
        // labelWidth: 15,
        // border: false,
        // borderWidth: 0,
        // borderColor: '#FFFFFF',

      },
    },
  })
}

onMounted(() => {
  initChart()
})
</script>

<template>
  <view class="progress-section">
    <view class="chart-wrapper">
      <canvas class="pieChart" canvas-id="pieChart" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.progress-section {

    .pieChart{
        width: 100%;
        height: 400rpx;
    }
    .chart-wrapper {
        background: #ffffff;
        height: 400rpx;
        border-radius: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    }
}
</style>
